<template>
    <Dialog :appDialog="appDialog"
      ><div class="content"
        ><div class="left-group">
          <!-- 员工管理 -->
          <Grouping @clicktree="getclickid"></Grouping>
        </div>
        <div class="right-group">
          <!-- 中间表格 -->
          <Sentablelist :selectid="selectid" ref="tableRef" :chooseid="chooseid" :chooseitem="chooseitem"></Sentablelist> </div></div
    ></Dialog>
</template>
<script lang="ts" setup>
  import { reactive, toRefs, ref, nextTick } from 'vue'
  import Dialog from '@/components/Dialog.vue'
  import Sentablelist from './Sentablelist.vue'
  import Grouping from './Grouping.vue'
  const emit = defineEmits(['submit'])
  const tableRef = ref(null)
  const selectid = ref(0) //分组id
  const chooseid = ref(null) //多选id
  const chooseitem = ref(null)
  const closeClick = (value: any) => {
    value.status = !value.status
  }

  const getclickid = async (data: any) => {
    selectid.value = data
    await nextTick()
    tableRef.value.search()
  }
  const openfirst = () => {
    selectid.value = 0
  }
  const cancelHandel = () => {
    appDialog.visible = false
  }
  const submitHandel = () => {
    const param = { paramlist: tableRef.value.paramlist, delData: tableRef.value.delData }
    emit('submit', param)
    appDialog.visible = false
  }
  const appDialog = reactive({
    visible: false,
    title: '选择敏感词',
    width: '950px',
    append:true,
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
  })
  defineExpose({
    appDialog,
    chooseid,
    chooseitem,
    openfirst
  })
</script>

<style lang="scss" scoped>
    .content {
      display: flex;
      justify-content: center;
    }
    .left-group {
      width: 280px;
      margin-right: 16px;
      border: 1px solid #eaeaea;
    }
    .right-group {
      width: calc(100% - 280px);
    }
</style>
